import React, { Component } from 'react'
import AddCourse from './AddCourse'
import Pages from '../Pages'
import { Spin, message } from 'antd'
import { Link } from 'react-router'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
import { browserHistory } from 'react-router'
import EditCourse from './EditCourse'
class Manage extends Component {
	constructor(args) {
		super()
		this.state = {
			courseType: '',
			courseName: '',
			checkState: '',
			jumpPage: 1,
			loading: false,
			totalPage: 1,
			courseList: [],
			//courseTypeName: [],
			categoriesList:[]
		}
	}
	classTypes(){
		fetch.goodType({pid:2}).then((data)=>{
			if (data.result === 'RC100') {
				this.setState({
					categoriesList: data.categoriesList?data.categoriesList:[],
				})
			} else {
				message.error(data.errMsg, 3);
				this.setState({
					categoriesList:[]
				})
			}
		},(res) => {
			this.setState({
					categoriesList:[]
		   })
			pub.reject(res);
		})
	}
	componentWillMount() {
		this.show();
		this.classTypes();
	}
	jump(page) {
		this.setState({
			jumpPage: page
		}, () => {
			this.show();
		})
	}
	submit(courseId) {
		fetch.submCourse({ courseId: courseId }).then((data) => {
			if(data.result === 'RC100'){
				this.show();
			}else{
				message.error(data.errMsg, 3);
			}
			
			
		}, (res) => {
			pub.reject(res);
		})
	}
	show() {
		pub.loading(this, true);
		fetch.teacherGetCourse(this.state.jumpPage, this.state.checkState, this.state.courseType, this.state.courseName).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					courseList: data.coursePage.pageItems || [],
					totalPage: data.coursePage.totalPage
				})
			} else {
				this.setState({
					courseList: [],
					totalPage: 0
				}, () => {
					message.error(data.errMsg, 3);
				})
			}
			pub.loading(this, false);
		}, (res) => {
			this.setState({
				courseList: [],
				totalPage: 0
			}, () => {
				pub.loading(this, false);
				pub.reject(res);
			})
		})
	}
	del(id) {
		fetch.delCourse({ courseId: id }).then((data) => {
			if (data.result === 'RC100') {
				this.show();
			} else {
				message.error(data.errMsg, 3);
			}
		})
	}
	selectcourType(e) {
		this.setState({ courseType: e.target.value }, () => {
			this.show();
		})
	}
	clickCourse(course,type){
		if(course.courseConvert===1){
			message.warning('视频上传中，请稍后再试...', 1);
			this.show();
		}else if(course.courseConvert===2){
			message.warning('视频上传失败，请联系管理员...', 1);
			this.show();
		}else{
			if(type===1){
				pub.jumpHistory.push(`/CourseManage/CourseTeacherDetail/${course.courseId}`)
			}else if(type===2){
                pub.jumpHistory.push(`/CourseManage/EditCourse/${course.courseId}`) 
			}else{
                this.submit(course.courseId)
			}
		}
	}
	render() {
		return (
			<div>
				<div className="filter clearFix">
					<div className="btn-filter floatL" style={{ padding: '12px 0 0 20px' }}>
						<ul className="nav clearFix">
							<li className={this.state.checkState === '' ? "active" : ""} onClick={() => { this.setState({ checkState: '' }, () => this.show()) }}><a>全部</a></li>
							<li className={this.state.checkState === '1' ? "active" : ""} onClick={() => { this.setState({ checkState: '1' }, () => this.show()) }}><a>预审</a></li>
							<li className={this.state.checkState === '5' ? "active" : ""} onClick={() => { this.setState({ checkState: '5' }, () => this.show()) }}><a>终审</a></li>
							<li className={this.state.checkState === '2' ? "active" : ""} onClick={() => { this.setState({ checkState: '2' }, () => this.show()) }}><a>未通过</a></li>
							<li className={this.state.checkState === '3' ? "active" : ""} onClick={() => { this.setState({ checkState: '3' }, () => this.show()) }}><a>审核中</a></li>
							<li className={this.state.checkState === '4' ? "active" : ""} onClick={() => { this.setState({ checkState: '4' }, () => this.show()) }}><a>草稿</a></li>
						</ul>
					</div>

					<div className="filter-search floatR">
						<input type="text" value={this.state.courseName} onChange={(e) => { this.setState({ courseName: e.target.value }) }} placeholder="搜索" />
						<a className="btn search-btn" onClick={() => this.show()} ><i className="icon-search"></i></a>
					</div>
					<div className="filter-select floatL">
						<select value={this.state.courseType} onChange={this.selectcourType.bind(this)}>
							<option key={0} value={''}>全部分类</option>
							{this.state.categoriesList.map((item, index) => {
								return (
									<option key={index} value={item.code}>{item.name}</option>
								)
							})}
						</select>
					</div>
				</div>
				<div className="table bg-FFFFFF box-shadow">
					<ul className="table-th clearFix">
						<li>课程名称</li>
						<li>状态/操作</li>
					</ul>
					<Spin spinning={this.state.loading} tip="加载列表中...">
						<ul className="table-td" style={{ minHeight: '620px' }}>
							{this.state.courseList.map((course, index) => {
								return (
									<li key={index}>
										<div className="info">
											<div className="img">
												<Link onClick={()=>this.clickCourse(course,1)}>
												{/*<video src={pub.getFile(course.coursevideoPath)}
																									width="100%"
																									height="100%"
																								>
																									
																	                  </video>*/}
					                  <img alt='test' className="v-img" src={require("../../style/images/test.png")}/>
											   <div className="play"><i className="icon-play"></i></div>
									  </Link>
											</div>
											<div className="info-txt">
												<h3>{course.courseName.length>70?course.courseName.substr(0,50)+'...':course.courseName}</h3>
												<p className='shorthand' style={{fontWeight:"normal"}}>{course.courseDesc.length>80?course.courseDesc.substr(0,80)+'...':course.courseDesc}</p>
												<span style={{width:'100%',fontWeight:"normal"}} ><i className="icon-time"></i>{pub.formatTimestamp(course.createTime)}</span>
											</div>
										</div>
										{(()=>{
											switch (course.checkState) {
												case '1':
												return(
													<div className="state">
														<span className="" style={{fontWeight:"normal"}}>预审</span>
														{/*<a className="btn btn-red" onClick={()=>this.del(course.courseId)}>下架</a>*/}
													</div>
												);
												case '2' :
												return(
													<div className="state"><span className="red" style={{width:"70px",fontWeight:"normal"}}>未通过</span>
														<Link onClick={()=>this.clickCourse(course,2)} className="btn btn-blue"><i className="icon-edit"></i>编辑</Link>
														<a className="btn btn-blue" onClick={()=>this.clickCourse(course,3)} style={{ width: '70px' }}>提交审核</a>
		                                             {/*<a className="btn btn-red" onClick={()=>this.del(course.courseId)}>下架</a>*/}
													</div>
												);
												case '3' :
												return(
													<div className="state"><span className="blue" style={{fontWeight:"normal"}}>审核中</span>
														{/*<a className="btn btn-red" onClick={()=>this.del(course.courseId)}>下架</a>*/}
													</div>
												);
												case '4' :
												return(
													<div className="state">
														<span className="green" style={{fontWeight:"normal"}}>草稿</span>
														<Link onClick={()=>this.clickCourse(course,2)} className="btn btn-blue"><i className="icon-edit"></i>编辑</Link>
														<a className="btn btn-blue" onClick={()=>this.clickCourse(course,3)} style={{ width: '70px' }}>提交审核</a>
														{/*<a className="btn btn-red" onClick={() => this.del(course.courseId)}>下架</a>*/}
													</div>
												);
												case '5' :
												return(
													<div className="state">
														<span className="" style={{fontWeight:"normal"}}>终审</span>
														{/*<Link href={`/EditCourse/${course.courseId}`} className="btn btn-blue"><i className="icon-edit"></i>编辑</Link>
									     	        	<a className="btn btn-blue" style={{width:'70px'}} onClick={()=>this.submit(course.courseId)}>提交审核</a>
									     	        	<a className="btn btn-red" onClick={()=>this.del(course.courseId)}>下架</a>*/}
													</div>
												);
												default:
												return(
													<div className="state"><span className="red">Error</span><a className="btn btn-red" onClick={() => this.del(course.courseId)}>下架</a></div>
												)
											}
										})()}
										{/*<Switch condition={course.checkState}>

										
											<Case value="1">
												<div className="state">
													<span className="" style={{fontWeight:"normal"}}>预审</span>
													
												</div>
											</Case>

											<Case value="2"><div className="state"><span className="red" style={{width:"70px",fontWeight:"normal"}}>未通过</span>
												<Link href={`/CourseManage/EditCourse/${course.courseId}`} className="btn btn-blue"><i className="icon-edit"></i>编辑</Link>
												<a className="btn btn-blue" style={{ width: '70px' }} onClick={() => this.submit(course.courseId)}>提交审核</a>
                                         
											</div></Case>
											<Case value="3"><div className="state"><span className="blue" style={{fontWeight:"normal"}}>审核中</span>
											
											</div></Case>
											<Case value="4">
												<div className="state">
													<span className="green" style={{fontWeight:"normal"}}>草稿</span>
													<Link href={`/CourseManage/EditCourse/${course.courseId}`} className="btn btn-blue"><i className="icon-edit"></i>编辑</Link>
													<a className="btn btn-blue" style={{ width: '70px' }} onClick={() => this.submit(course.courseId)}>提交审核</a>
													
												</div>
											</Case>
											<Case value="5">
												<div className="state">
													<span className="" style={{fontWeight:"normal"}}>终审</span>
												
												</div>
											</Case>

											<Default><div className="state"><span className="red">Error</span><a className="btn btn-red" onClick={() => this.del(course.courseId)}>下架</a></div></Default>

									</Switch>*/}
										
										


									</li>
								)
							})}
						</ul>
					</Spin>
				</div>
				<div className="line"></div>

				<Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />


			</div>
		)
	}
}


class CourseManage extends Component {
	constructor(args) {
		super();
		this.state = {
			tab: 1
		}
	}
	check(_prop) {
		if (pub.user == null) {
			pub.jumpHistory.push('/Login');
			return;
		}

		if (pub.user.userType !== '讲师' && pub.user.userType !== '管理员') {
			pub.jumpHistory.push('/Entrance');
			return;
		}

		if (_prop.location.pathname === ('/CourseManage')) {
			this.show(1);
			return;
		}
		if (_prop.location.pathname.indexOf('/AddCourse') !== -1) {
			this.show(2);
			return;
		}
		if (_prop.location.pathname.indexOf('/EditCourse') !== -1) {
			this.show(3);
			return;
		}
	}
	componentWillMount() {
		this.check(this.props);
	}
	componentWillReceiveProps(nextProps) {
		this.check(nextProps);
	}

	show(tab) {
		this.setState({
			tab
		})
	}
	render() {
		return (
			<div className="wrapper bg-F0F4F6">
				<div className="layout clearFix pad-t-20">
					<div className="filter clearFix">
						<ul className="filter-ul clearFix">
							<li><Link to='/CourseManage' className={this.state.tab === 1 || this.state.tab === 3 ? "active" : ""} onClick={() => { this.setState({ tab: 1 }) }}>课程管理</Link></li>
							<li><Link to='/CourseManage/AddCourse' className={this.state.tab === 2 ? "active" : ""} onClick={() => { this.setState({ tab: 2 }) }}>创建课程</Link></li>
						</ul>

						{this.state.tab === 1 ? <div className="filter-search floatR" style={{ marginRight: '0px' }}>
						</div> : null}
					</div>
					{(()=>{
						switch(this.state.tab){
							case 1 : 
							return(
								<Manage show={this.show.bind(this)} />
							);
							case 2 :
							return(
								<AddCourse />
							);
							case 3 :
							return(
								<EditCourse courseId={this.props.params.id} />
							);
							default : 
							return(
								<div></div>
							)
						}
					})()}
				</div>
			</div>
		)
	}
}
export default CourseManage;